require(['./config'], () => {
    require(['template', 'header', 'footer'], (template) => {
        class list {
            constructor() {
                this.getListData().then(() => {
                    // this.sort()
                    this.page_slider()
                })
            }
            getListData() {
                // const id = window.location.search.slice(4);
                return new Promise(resolve => {
                    $.get('http://rap2api.taobao.org/app/mock/234038/lsit', resp => {
                        // console.log(list);
                        if (resp.code == 200) {
                            const { img } = resp.body;
                            // console.log(img)
                            $('.list').html(template('listTemplate', { img }));
                            resolve();

                        }
                    })
                })
            }
            sortPro(arr, attr, type) {
                if (type) {
                    return arr.sort(function (a, b) {
                        if (a[attr] > b[attr]) {
                            return 1
                        } else if (b[attr] > a[attr]) {
                            return -1
                        } else {
                            return 0
                        }
                    })
                } else {
                    return arr.sort(function (a, b) {
                        if (a[attr] > b[attr]) {
                            return -1
                        } else if (b[attr] > a[attr]) {
                            return 1
                        } else {
                            return 0
                        }
                    })
                }
            }

            //分页
            page_slider() {
               
                tabPage({
                    pageMain: '#pageBox',
                    pageNav: '#pageNav',
                    pagePrev: '#prev',
                    pageNext: '#next',
                    curNum: 8,
                    /*每页显示的条数*/
                    activeClass: 'active',
                    /*高亮显示的class*/
                    ini: 0 /*初始化显示的页面*/
                });

                function tabPage(tabPage) {
                    var pageMain = $(tabPage.pageMain);
                    /*获取内容列表*/
                    var pageNav = $(tabPage.pageNav);
                    /*获取分页*/
                    var pagePrev = $(tabPage.pagePrev);
                    /*上一页*/
                    var pageNext = $(tabPage.pageNext);
                    /*下一页*/


                    var curNum = tabPage.curNum;
                    /*每页显示数*/
                    var len = Math.ceil(pageMain.find("li").length / curNum);
                    /*计算总页数*/
                    console.log(pageMain.find("li").length);
                    var pageList = '';
                    /*生成页码*/
                    var iNum = 0;
                    /*当前的索引值*/

                    for (var i = 0; i < len; i++) {
                        pageList += '<a href="javascript:;">' + (i + 1) + '</a>';
                    }
                    pageNav.html(pageList);
                    /*头一页加高亮显示*/
                    pageNav.find("a:first").addClass(tabPage.activeClass);

                    /*******标签页的点击事件*******/
                    pageNav.find("a").each(function () {
                        $(this).click(function () {
                            pageNav.find("a").removeClass(tabPage.activeClass);
                            $(this).addClass(tabPage.activeClass);
                            iNum = $(this).index();
                            $(pageMain).find("li").hide();
                            for (var i = ($(this).html() - 1) * curNum; i < ($(this).html()) * curNum; i++) {
                                $(pageMain).find("li").eq(i).show()
                            }

                        });
                    })


                    $(pageMain).find("li").hide();
                    /************首页的显示*********/
                    for (var i = 0; i < curNum; i++) {
                        $(pageMain).find("li").eq(i).show()
                    }


                    /*下一页*/
                    pageNext.click(function () {
                        $(pageMain).find("li").hide();
                        if (iNum == len - 1) {
                            alert('已经是最后一页');
                            for (var i = (len - 1) * curNum; i < len * curNum; i++) {
                                $(pageMain).find("li").eq(i).show()
                            }
                            return false;
                        } else {
                            pageNav.find("a").removeClass(tabPage.activeClass);
                            iNum++;
                            pageNav.find("a").eq(iNum).addClass(tabPage.activeClass);
                            //                    ini(iNum);
                        }
                        for (var i = iNum * curNum; i < (iNum + 1) * curNum; i++) {
                            $(pageMain).find("li").eq(i).show()
                        }
                    });
                    /*上一页*/
                    pagePrev.click(function () {
                        $(pageMain).find("li").hide();
                        if (iNum == 0) {
                            alert('当前是第一页');
                            for (var i = 0; i < curNum; i++) {
                                $(pageMain).find("li").eq(i).show()
                            }
                            return false;
                        } else {
                            pageNav.find("a").removeClass(tabPage.activeClass);
                            iNum--;
                            pageNav.find("a").eq(iNum).addClass(tabPage.activeClass);
                        }
                        for (var i = iNum * curNum; i < (iNum + 1) * curNum; i++) {
                            $(pageMain).find("li").eq(i).show()
                        }
                    })

                }
            }
            sort() {
                console.log($('.dontknow li ul li'))
                $('.dontknow li ul li').on('click', (e) => {
                    e = e || window.event;
                    var target = e.target || e.srcElement;
                    if (target.hasClass('one')) {
                        fetch('http://rap2api.taobao.org/app/mock/232286/table').then(resp => {
                            return resp.json()
                        }).then(resp => {
                            console.log(resp)
                            var arr2 = sortPro(resp.table, 'price', false)
                            console.log(arr2, 222)
                        })

                        // var arr = [1, 9, 10, 99, 1313, 3, 2]
                        // var arr2 = arr.sort(function(a, b) {
                        //     return a - b 
                        // })
                        // console.log(arr2)
                    }
                })
            }
        }
        new list();
    })
})